<template>
	<div class="group-info">
    <div class="info-title">
      <span>集团信息:</span>
      <el-button type="primary" @click="submitForm('ruleForm')" data-auth="bloc_info_modify">修改</el-button>
    </div>
    <div class="info-form">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px">
        <el-form-item label="集团LOGO" prop="Logo">
          <el-upload
            class="avatar-uploader"
            action="/"
            :show-file-list="false"
            :before-upload="beforeAvatarUpload">
            <img v-if="ruleForm.Logo" :src="ruleForm.Logo" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <div class="el-upload__tip">请上传png、jpg及jpeg格式图片(大小2M以下,建议分辨率256*256)</div>
        </el-form-item>
        <el-form-item label="集团名称" prop="Name">
          <el-input v-model="ruleForm.Name"></el-input>
        </el-form-item>
        <el-form-item label="集团电话" prop="Phone">
          <el-input v-model="ruleForm.Phone"></el-input>
        </el-form-item>
        <el-form-item label="集团所在省" prop="ProvinceId">
					<el-select v-model="ruleForm.ProvinceId" placeholder="请选择省" @change="querylistbypid(ruleForm.ProvinceId,'CityList','CityId')">
				    <el-option
				      v-for="item in ProvinceList"
				      :key="item.Id"
				      :label="item.CnName"
				      :value="item.Id">
				    </el-option>
				  </el-select>
        </el-form-item>
				<el-form-item label="集团所在市" prop="CityId">
					<el-select v-model="ruleForm.CityId" placeholder="请选择市">
						<el-option
							v-for="item in CityList"
							:key="item.Id"
							:label="item.CnName"
							:value="item.Id">
						</el-option>
					</el-select>
        </el-form-item>
        <el-form-item label="集团详细地址" prop="FullAddress">
          <el-input v-model="ruleForm.FullAddress"></el-input>
        </el-form-item>
        <el-form-item label="短信项目标识" prop="SMSSign">
          <el-input v-model="ruleForm.SMSSign"></el-input>
        </el-form-item>
      </el-form>
    </div>
	</div>
</template>
<script>
	  export default {
        data () {
					const _this=this;
            return {
							ProvinceList:[],
							CityList:[],
              ruleForm: {
                Name: '',
                Phone: '',
                CityName: '',
                FullAddress: '',
								ProvinceId:'',
								CityId:'',
                Logo:'',
								SMSSign:''
              },
              rules: {
                Logo: [
                  { required: true,validator: (rule, value, callback) => {
                      if (!_this.ruleForm.Logo) {
                        callback(new Error('请上传集团LOGO'));
                      } else {
                        callback();
                      }
                    }, trigger: 'focus' }
                ],
								ProvinceId: [
                  { required: true, message: '请选择集团所在省', trigger: 'change' },
                ],
								CityId: [
                  { required: true, message: '请选择集团所在市', trigger: 'change' },
                ],
                Name: [
                  { required: true, message: '请输入集团名称', trigger: 'blur' },
                ],
                Phone: [
                  { required: true, message: '请选择集团电话', trigger: 'blur' }
                ],
                CityName: [
                  { required: true, message: '请输入集团城市', trigger: 'blur' },
                ],
                FullAddress: [
                  { required: true, message: '请输入详细地址', trigger: 'blur' },
                ],
								SMSSign: [
                  { required: true, message: '请输入短信项目标识', trigger: 'blur' },
                ],
              }
            }
        },
        created(){
					this.getInfo(JSON.parse(sessionStorage.getItem('nowmenu')).Id);
					this.querylistbypid(1,'ProvinceList');
        },
        methods:{
					querylistbypid(id,type,reset){
						if(reset){
							this.ruleForm[reset]='';
						}
						this.$ajax.querylistbypid({pid:id}).then(res=>{
							if(res.Success){
								this[type]=res.Data;
							}
						})
					},
					getInfo(id){
						this.$ajax.GetBlocInfoById({id:id}).then(res=>{
							if(res.Success){
								this.ruleForm=res.Data;
								this.querylistbypid(this.ruleForm.ProvinceId,'CityList');
							}
						})
					},
          submitForm(formName) {
            this.$refs[formName].validate((valid) => {
              if (valid) {
                this.$ajax.SaveBlocInfo(this.ruleForm).then(res=>{
									if(res.Success){
										this.$message.success('已修改!');
										this.$refs[formName].resetFields();
										this.getInfo(this.ruleForm.Id);
									}
                })
              } else {
                return false;
              }
            });
          },
          resetForm(formName) {
            this.$refs[formName].resetFields();
          },
          beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg'||file.type === 'image/png';
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isJPG) {
              this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
              return
            }
            if (!isLt2M) {
              this.$message.error('上传头像图片大小不能超过 2MB!');
              return
            }
            let reader = new FileReader()
            reader.readAsDataURL(file)
            reader.onloadend = ()=>{
							file.url = reader.result;
							this.$ajax.upLoadImg({FileName:file.name,FileBase64:file.url.split(',')[1]}).then(res=>{
								if(res.Success){
			              this.ruleForm.Logo=res.Data;
			              this.$refs['ruleForm'].validateField('Logo');
								}
							})
            }
						return false;
          }
        }
	  }
</script>
